<template>
  <div class="myResidential">
    <div class="residential-tittle">选择您的物业小区</div>
    <div class="residential">
      <ul class="residential-list">
        <li v-for="(list,index) in listData" :key="index" @click="Switching(list.residential_id)">
          <div class="residential-img">
            <img v-lazy="host+list.image" :src="host+list.image" alt="">
          </div>
          <div class="residential-name">{{list.residential_text}}</div>
          <div class="residential-city">{{city}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import api from '../../api/api.js'
export default {
  data(){
    return{
      Residential: null,
      city: '',
      listData:[],
      host: api.host
    }
  },
  created(){
    this.city = this.$route.query.city
    this.getresidential()
  },
  methods:{
    // 获取所有小区列表
    getresidential(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.Residential = this.$route.query.ResidentialCode
      this.$get(api.allResidential, {
        params: {
 　　     area_number: this.Residential
        }
      })
      .then((response) => {
        if(response.data.code==1){
          this.listData = response.data.data.list
          this.$toast.clear();
        }
      })
      .catch((error) => {
        console.log(error)
        this.$toast.clear();
      });
    },
    // 选择需切换校区
    Switching(ID){
      this.$get(api.Switching, {
        params: {
 　　     id: ID
        }
      })
      .then((response) => {
        this.$router.push({
          path: '/',
        })
        window.location.reload();
        // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
      })
      .catch((error) => {
        console.log(error)
      });
    }
  }
}
</script>
<style scoped>
.residential-tittle{
  padding: .5rem 0;
  color: #000;
  font-weight: bold;
  font-size: .64rem;
  text-align: center;
  height: .88rem;
  line-height: .88rem;
}
/* .residential-list{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
} */
.residential-list li{
  width: 41%;
  height: 5.5rem;
  display: inline-block;
}
.residential-list li:nth-child(odd){
  margin-left:6%;
}
.residential-list li:nth-child(even){
  margin-left:6%;
}
.residential-list li .residential-img{
  width: 100%;
  height: 70%;
  border-radius: .2rem;
  background: #fff;
}
.residential-list li .residential-img img{
  width: 100%;
  height: 100%;
  border-radius: .2rem;
}
.residential-name{
  margin: .25rem 0 0.05rem 0;
  height: .45rem;
  line-height: .45rem;
  font-size: .32rem;
  font-weight: bold;
  color: #000;
  text-indent: .15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.residential-city{
  height: auto;
  font-size: .24rem;
  font-weight: bold;
  color: #57c5c6;
  text-indent: .15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
</style>

